<template>
	<!-- 重点人员 -->
	<view>
		<view v-for="(item,index) in keyPersonnelList">
			<view class="keyPersonnelItem" @click="handleClick(item.page)">
				<image class="keyPersonnelImg" :src="item.imgPath" mode="widthFix"></image>
				<view class="keyPersonnelTitle">{{ item.title }}</view>
				<view class="num">{{ item.num }}</view>
				<image class="grayRightArrow" mode="widthFix" src="../../../static/icon/icon_right_gray_arrow.png"></image>
			</view>
			<view style="width: 100%;height: 1px;background-color: #f4f1f1;"></view>
		</view>
		<navigator url=""></navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyPersonnelList: [
					{
						title: "重点人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./ImportPersonnel/Index"
					},
					{
						num:0,
						title: "境外人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./OverseaPersonnel/Index"
					}, 
					{
						num:0,
						title: "低龄人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./ChildrenPersonnel/Index"
					},
					{
						num:0,
						title: "烈士亲属",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./MartyrKinsfolkPersonnel/Index"
					},
					{
						num:0,
						title: "刑释解教人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./PrisonerPersonnel/Index"
					},
					{
						num:0,
						title: "残疾人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./DisabledPersonnel/Index"
					},
					{
						num:0,
						title: "高龄人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./OldPersonnel/Index"
					},
					{
						num:0,
						title: "问题青少年",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./ProblemTeenagers/index"
					},
					{
						num:0,
						title: "涉稳人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./HiddenPersonnel/Index"
					},
					{
						num:0,
						title: "信访人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./PetitionPersonnel/Index"
					},
					{
						num:0,
						title: "吸毒人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./DrugAddictPersonnel/Index"
					},
					{
						num:0,
						title: "重症患者",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./PatientsPersonnel/Index"
					}, {
						num:0,
						title: "社区矫正人员",
						imgPath: "../../../static/icon/fangwu.png",
						page: "./CommunityPersonnel/Index"
					},
				]
			}
		},
		mounted() {
			this.getImportantPersonNum()
		},
		methods: {
			handleClick(url) {
				uni.navigateTo({url})
			},
			getImportantPersonNum() {
				this.$u.api.getImportantPersonNum()
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							let data = res.result
							for(var key in data){
								var value = data[key]
								this.keyPersonnelList[1].num = data[1]
								this.keyPersonnelList[2].num = data[2]
								this.keyPersonnelList[3].num = data[3]
								this.keyPersonnelList[4].num = data[4]
								this.keyPersonnelList[5].num = data[5]
								this.keyPersonnelList[6].num = data[6]
								this.keyPersonnelList[7].num = data[7]
								this.keyPersonnelList[8].num = data[8]
								this.keyPersonnelList[9].num = data[9]
								this.keyPersonnelList[10].num = data[10]
								this.keyPersonnelList[11].num = data[11]
								this.keyPersonnelList[12].num = data[12]
								this.keyPersonnelList[0].num = parseInt(data[1]) + parseInt(data[2]) + parseInt(data[3]) + parseInt(data[4]) + parseInt(data[5]) + 
								parseInt(data[6]) + parseInt(data[7]) + parseInt(data[8]) + parseInt(data[9]) + parseInt(data[10]) + parseInt(data[11]) + parseInt(data[12])
							}
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f7;
	}

	.keyPersonnelItem {
		padding-left: 10px;
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: #fff;
		display: flex;
		align-items: center;
		.num{
			width: 35rpx;
			height: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #007AFF;
			border-radius: 50%;
			color: #fff;
			font-size: 26rpx;
			margin-right: 30rpx;
		}
		.keyPersonnelImg {
			width: 24px;
			height: 24px;
		}

		.keyPersonnelTitle {
			flex: 1;
			margin-left: 10px;
			font-size: 14px;
			color: #333333;
		}

		.grayRightArrow {
			width: 18px;
			height: 18px;
			margin-right: 6px;
		}
	}
</style>
